<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <script src="/static/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-4.5.0/css/bootstrap.min.css">
    <script src="/static/bootstrap-4.5.0/js/bootstrap.min.js"></script>
    <link href="/static/fontawesome-free-5.11.2/css/all.min.css" rel="stylesheet">
    <script src="/static/login/js/yz.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/login/css/login.css">
    <style>
        .icon {
            font-family: FontAwesome;
        }
    </style>
</head>

<body style="">
<div class="shadow mb-5 bg-light rounded login-top">
    <div class="head">
        <img src="/static/login/images/logo.png"><span><h1>·</h1>登录</span>
    </div>
</div>
<div class="login-box">
    <div class="tree">
        <img src="/static/login/images/2.png" class="img-fluid">
    </div>
    <div class="slogan">
        克勤之致<br><span class="yellow">结青藤</span>之缘
    </div>
    <div id="earth" class="move">
        <img src="/static/login/images/1.png" class="img-fluid">
    </div>
    <!-- 登录 -->
    <div class="login">
        <div class="login-logo">
            <img src="/static/login/images/logo.png" class="img-fluid">
        </div>
        <div class="login-other">
            <div><img src="/static/login/images/QQ-line.png"></div>
            <div><img src="/static/login/images/wx-line.png"></div>
            <div><img src="/static/login/images/sina-line.png"></div>
        </div>
        <div class="hr"><span>或</span></div>
        <div class="login-form">
            <form method="POST" id="loginForm">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fas fa-user-circle text-success"></span>
                            </span>
                    </div>
                    <input type="text" class="form-control" id="phone" name="username" placeholder="手机号码" value="system">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fas fa-unlock text-success"></span>
                            </span>
                    </div>
                    <input type="password" class="form-control" id="pwd" name="password" placeholder="密码" value="admin">
                </div>
                <button type="button" id="login" class="btn btn-success btn-block">登录</button>
            </form>
        </div>
        <div class="login-regist">
            没有帐号？<span id="ToRegist">立即注册</span>
        </div>
    </div>
    <!-- 注册 -->
    <div class="regist">
        <div class="regist-title">
            手机注册<span><img src="/static/login/images/logo.png" height="40px"></span>
        </div>
        <div class="regist-form">
            <form method="POST" >
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-mobile text-success"></span>
                            </span>
                    </div>
                    <input type="text" class="form-control" id="phone" name="loginCode" placeholder="手机号码">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-unlock-alt text-success"></span>
                            </span>
                    </div>
                    <input type="password" class="form-control" id="pwd" name="password" placeholder="密码">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-unlock-alt text-success"></span>
                            </span>
                    </div>
                    <input type="password" class="form-control" id="checkpwd" placeholder="确认密码">
                </div>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="手机验证码" id="code" name="code">
                    <div class="input-group-append">
                        <span class="input-group-text text-success">获取验证码</span>
                    </div>
                </div>
                <button type="button" id="login" class="btn btn-success btn-block">注册</button>
            </form>
        </div>
        <div class="otherLogin">
            <div class="qq">
                <img src="/static/login/images/QQ.png" class="img-fluid">
            </div>
            <div class="wx">
                <img src="/static/login/images/wx.png" class="img-fluid">
            </div>
        </div>
        <div class="login-login">
            <span id="otherLogin">快捷登录</span>
            <span id="phoneLogin">手机注册</span>
            <span id="ToLogin">返回登录</span>
        </div>
    </div>
</div>
<div class="login-footer">
    <div class="container">
        <div class="row">
            <div class="col text-center login-nav">
                <ul>
                    <li><a href="#">首页</a>
                        <div class="border"></div>
                    </li>
                    <li><a href="#">关于我们</a>
                        <div class="border"></div>
                    </li>
                    <li><a href="#">企业招聘</a>
                        <div class="border"></div>
                    </li>
                    <li><a href="#">合作专区</a>
                        <div class="border"></div>
                    </li>
                    <li><a href="#">联系我们</a>
                        <div class="border"></div>
                    </li>
                    <li><a href="#">意见反馈</a></li>
                </ul>

            </div>
        </div>
    </div>
</div>

<!-- 验证弹窗 -->
<div class="box-bg">
    <div class="box">
        <img src="/static/login/images/cw.png" class="cuo">
        <span class="top-s">身份验证</span>
        <span class="top-x">拖动滑块，使图片角度为正</span>
        <div id="rotateWrap1">
            <div class="rotateverify-contaniner">
                <div class="rotate-can-wrap">
                    <canvas class="rotateCan rotate-can" width="200" height="200"></canvas>
                    <div class="statusBg status-bg"></div>
                </div>
                <div class="control-wrap slideDragWrap">
                    <div class="control-tips">
                        <p class="c-tips-txt cTipsTxt">滑动将图片转正</p>
                    </div>
                    <div class="control-bor-wrap controlBorWrap"></div>
                    <div class="control-btn slideDragBtn">
                        <i class="control-btn-ico"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" th:inline="javascript">
    ctx = /*[[@{/}]]*/ '';
</script>
<script>
    setTimeout('changeState()', 1000)

    //地球动画
    function changeState() {
        // console.log('动画开始');
        $('#earth').removeClass('earth');
        $('#earth').addClass('move');
    }

    $(function () {
        // 验证弹窗
        // 点击按钮
        $("#login").click(function () {
            $(".box-bg").css("display", "block");
            $("#login").attr("disabled", true);
        })
        $(".cuo").click(function () {
            $(".box-bg").css("display", "none");
            $("#login").attr("disabled", false);
        })
        //1
        var myRotateVerify = new RotateVerify('#rotateWrap1', {
            initText: '滑动将图片转正', //默认
            slideImage: [
                'static/login/images/3.png',
                'static/login/images/4.png',
                'static/login/images/5.png'
            ], //arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
            slideAreaNum: 100, // 误差范围角度 +- 10(默认)
            getSuccessState: function (res) { //验证通过 返回  true;
                if (res) {//验证通过
                    setTimeout(function () {
                        $(".box-bg").css("display", "none");
                    }, 1000);
                    var data = $("#loginForm").serialize();
                    console.log(data,"登录数据");
                    //处理业务逻辑
                    $.ajax({
                        type:'post',
                        url: ctx + 'login',
                        data: data,
                        success: function(e) {
                           console.log(e);
                           if(e.code == 200){
                               location.reload()
                           }else{
                                alert("登录失败");
                           }
                        }
                    })
                } else {//验证不通过
                }
            }
        })


        //注册登录切换
        //登录
        $('#ToRegist').click(function () {
            //console.log('登录')
            $('.regist').css('display', 'block')
            $('.login').css('display', 'none')
        })
        //注册
        $('#ToLogin').click(function () {
            //console.log('注册')
            $('.regist').css('display', 'none')
            $('.login').css('display', 'block')
        })
        //注册页面注册方式切换
        $('#otherLogin').click(function () {
            $('.regist-form').css('display', 'none')
            $('.otherLogin').css('display', 'block')
            $('#phoneLogin').css('display', 'block')
            $('#otherLogin').css('display', 'none')
            $('.regist-title').html('快捷登录')
        })
        $('#phoneLogin').click(function () {
            $('.regist-form').css('display', 'block')
            $('.otherLogin').css('display', 'none')
            $('.regist-title').html('手机注册')
            $('#phoneLogin').css('display', 'none')
            $('#otherLogin').css('display', 'block')
        })
    })
</script>


</body>
</html>